<template>
  <div class="location-monitor">
    <!-- 使用封装的楼栋监视组件 -->
    <building-monitor
      :selected-elevator="selectedElevator"
      @building-click="handleBuildingClick"
      @unit-click="handleUnitClick"
      @elevator-click="handleElevatorClick"
      @alarm-events="openAlarmEventsPage"
    />

    <!-- 电梯详情区域 -->
    <div class="monitor-section" v-if="selectedElevator && elevatorDetailData">
      <div class="section-title">{{ selectedElevator.levelName || selectedElevator.lcName }} - 温度监测详情</div>
      <elevator-detail
        :elevator-data="selectedElevator"
        :detail-data="elevatorDetailData"
        @refresh="loadElevatorDetail"
      />
    </div>
  </div>
</template>

<script>
import { getElevatorDetail } from '@/api/project/building';
import ElevatorDetail from '@/components/ElevatorDetail/';
import BuildingMonitor from '@/components/BuildingMonitor/';

export default {
  name: 'LocationMonitor',
  components: {
    ElevatorDetail,
    BuildingMonitor
  },
  data() {
    return {
      selectedElevator: null,
      elevatorDetailData: null,
      loadingDetail: false
    };
  },
  methods: {
    // 处理楼栋点击
    handleBuildingClick(building) {
      console.log('点击楼栋:', building);
    },

    // 处理单元点击
    handleUnitClick(unit) {
      console.log('点击单元:', unit);
    },

    // 处理电梯点击
    async handleElevatorClick(elevator) {
      console.log('点击电梯:', elevator);

      // 如果点击的是已选中的电梯，则取消选择
      if (this.selectedElevator && this.selectedElevator.lcCode === elevator.lcCode) {
        this.selectedElevator = null;
        this.elevatorDetailData = null;
        return;
      }

      this.selectedElevator = elevator;
      this.elevatorDetailData = null; // 先清空旧数据
      console.log('设置 selectedElevator:', this.selectedElevator);

      await this.loadElevatorDetail();

      // 滚动到详情区域
      this.$nextTick(() => {
        const detailSection = document.querySelector('.elevator-detail-section');
        if (detailSection) {
          detailSection.scrollIntoView({behavior: 'smooth'});
        }
      });
    },

    // 加载电梯详情
    async loadElevatorDetail() {
      if (!this.selectedElevator) return;

      this.loadingDetail = true;
      try {
        console.log('开始加载电梯详情，lcId:', this.selectedElevator.lcId);
        const response = await getElevatorDetail(this.selectedElevator.lcId);
        console.log('电梯详情响应:', response);

        if (response.code === 200) {
          this.elevatorDetailData = response.data;
          console.log('设置 elevatorDetailData:', this.elevatorDetailData);
        } else {
          this.$message.error('加载电梯详情失败');
        }
      } catch (error) {
        console.error('加载电梯详情失败:', error);
        this.$message.error('加载电梯详情失败');
      } finally {
        this.loadingDetail = false;
      }
    },

    // 打开告警事件功能页面
    openAlarmEventsPage(elevator) {
      console.log('打开告警事件页面，电梯信息:', elevator);
      this.$router.push({
        path: '/project/event',
        query: {
          lcCode: elevator.lcCode,
          source: 'monitor'
        }
      });
    }
  }
};
</script>

<style scoped>
.location-monitor {
  padding: 4px 16px;
  background-color: #f5f7fa;
}

.monitor-section {
  margin-bottom: 24px;
}

.section-title {
  margin: 12px 0;
  padding: 0 12px;
  border-left: 4px solid #1890ff;
  color: #303133;
  font-size: 14px;
  font-weight: 600;
}

/* 电梯详情区域 */
.elevator-detail-section {
  margin-top: 24px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.loading-container {
  padding: 20px;
  background: white;
  border-radius: 8px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .location-monitor {
    padding: 4px 8px;
  }
}

@media (max-width: 480px) {
  .location-monitor {
    padding: 2px 4px;
  }
}
</style>
